<template>
  <div class="data_table">
    <div ref="mychart" id="mychart"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts"

  import { dataTableMethods } from 'common/mixin'

  export default {
    name: 'data_table_pie',
    mixins: [ dataTableMethods ],
    mounted() {
      // 1.初始化
      let myEcharts = echarts.init(this.$refs.mychart)
      // 2.设置 echarts 数据
      let data = [
        {value: 89, name: "首饰"},
        {value: 125, name: "美妆"},
        {value: 40, name: "鞋袜"},
        {value: 67, name: "衣装"},
        {value: 60, name: "家纺"},
      ];

      // 3.设置配置项
      let option = {
        title: {
          text: "月开销分析",
          textStyle: {
            fontSize: this.fontSize(18)
          }
        },
        tooltip: {
          textStyle: {
            fontSize: this.fontSize(14)
          },
          position: this.changePosition()
        },
        legend: {
          left: "right",
          // 图例的布局朝向
          orient: "verical",
          itemGap: this.fontSize(12), // 图例间隔
          itemHeight: this.fontSize(12),
          textStyle: {
            fontSize: this.fontSize(12)
          }
        },
        series: [
          {
            name: "本月开销",
            type: "pie", // 饼状图
            data,
            label: {
              show: true,
              position: "inside", // center 中心展示 inside 圈上展示 outside 外侧展示
              fontSize: this.fontSize(14),
              color: "#fff"
            },
          }
        ]
      }
      // 4.绘制图表
      myEcharts.setOption(option)

      // 5.随浏览器窗口变动，变化大小
      window.onresize = function() {
        myEcharts.resize();
      }
    },
    methods: {
      // 图标内 px 单位换算
      // fontSize(size,defalteWidth = 414) {
      //   let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      //   if (!clientWidth) return size;
      //   let scale = (clientWidth / defalteWidth);
      //   return Number((size * scale).toFixed(3));
      // }
    }
  }
</script>

<style scoped>
  .data_table {
    margin: 0 auto;
    width: 90%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
  }

  #mychart {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    border: 1px solid #eee;
  }
</style>
